<template>
	<view>
		<template v-if="listData.length > 0">
			<view class="operator">
				<view>总共{{listData.length}}条</view>
				<view style="display: flex;align-items: center;">
					<image style="width: 30rpx;height: 30rpx;margin-right: 8rpx;" src="/static/clear.png"></image>
					<view @click="handleClear">清空</view>
				</view>
			</view>
			
			<view class="content" v-for="(item,index) in listData" :key="index">
				<view style="color: #999;">{{item.expression.replace(/\*/g, '×').replace(/\//g, '÷')}}</view>
				<view style="color: #333;">{{item.result}}</view>
			</view>
		</template>
		
		<template v-else>
			<view class="noData">
				<image style="width: 300rpx;height: 300rpx;" src="/static/empty.png"></image>
			</view>
		</template>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	
	const listData = ref([])
	onLoad(() => {
		try {
			const value = uni.getStorageSync('calculateHistory');
			if (value) {
				// console.log(value);
				listData.value = value
			}
		} catch (e) {
			// error
		}
	})
	
	function handleClear(){
		uni.showModal({
			title: '提示',
			content: '确定清空？',
			success: function (res) {
				if (res.confirm) {
					try {
						uni.removeStorageSync('calculateHistory');
						
						listData.value = []
					} catch (e) {
						// error
					}
				}
			}
		});
	}
</script>

<style>
@import "history.css"	       
</style>
